<template>
  <div class="wrap">
    <CHeader content="人员在岗在位分析" />
    <div class="box">
      <el-radio-group v-model="filter.address" style="margin-bottom: 30px">
        <el-radio-button
          v-for="(item, index) in regionArray"
          :key="index"
          :label="item.label"
        >{{ item.name }}</el-radio-button
        >
      </el-radio-group>
      <div
        class="bodyContainer"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <!-- echarts -->
        <div class="echarts_box_wrap">
          <EchartsBox
            ref="leftEcharts"
            class="echarts_box"
            :data="result.accessData"
            unit="家"
            @more="log"
            v-if="result.accessData"
            title="辖内企业接入数量"
            :totalNum="result.accessTotal"
            :echartsOption="option.accessOption"
          />
          <EchartsBox
            ref="rightEcharts"
            class="echarts_box"
            :data="result.alarmData"
            labelName="总预警数"
            @more="goPath('/qyrydwgl/qyrydwglbjgl')"
            v-if="result.alarmData"
            title="辖内企业报警处理"
            :totalNum="result.alarmTotal"
            :echartsOption="option.alarmOption"
            :dataAttributes="option.alarmDataAttributes"
          />
        </div>

        <!-- tabs -->
        <div class="tabsContainer">
          <div
            v-for="(item, index) in tabs"
            :key="index"
            :total-num="item.num"
            class="tab"
            :data-index="index"
            @click.stop="touchTab"
          >
            <img :src="item.src" :alt="item.name" />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
        <CardTable
          @more="log"
          :data="tableData"
          :pageOption.sync="pageOption"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import CHeader from "@/components/Cheader/Cheader";
import EchartsBox from "@/components/echartsBox/echartsBox";
import CardTable from "@/components/cardTable/cardTable";

import { requestPost ,requestGet } from "@/network/request";

export default {
  name: "qyrydwglsy",
  components: {
    CHeader,
    EchartsBox,
    CardTable,
  },
  watch: {
    filter: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
  data() {
    return {
      loading: true,
      regionArray: [
        // 全市 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "全市", label: "" }
      ],
      pageOption: {
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "sizes, prev, pager, next, jumper",
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 过滤器
      filter: {
        address: "",
      },
      option: {
        accessOption: {
          title: { text: "接入率\n92.5%", x: "center", y: "center" },
        },
        alarmOption: {
          title: { text: "消警率\n92.5%", x: "center", y: "center" },
        },
        alarmDataAttributes: [
          {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: "#5A86FF" },
                { offset: 1, color: "#83A0FF" },
              ]),
            },
            label: {
              show: true,
              formatter: "{a|{b}}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-30, 15, -20, 15],
                  color: "#8C7CFF",
                },
              },
            },
          },
          {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: "#FF717C" },
                { offset: 1, color: "#FFB6B7" },
              ]),
            },
            label: {
              show: true,
              position: "outside",
              align: "left",
              formatter: "{a|{b}}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-30, 150, -20, 15],
                  color: "#FF8A69",
                },
              },
            },
          },
        ],
      },
      tabs: [
        {
          src: require("@/assets/images/enterprisePersonnelPositionManage/1.png"),
          num: 0,
          name: "超员报警",
        },
        {
          src: require("@/assets/images/enterprisePersonnelPositionManage/2.png"),
          num: 0,
          name: "串岗报警",
        },
        {
          src: require("@/assets/images/enterprisePersonnelPositionManage/3.png"),
          num: 0,
          name: "脱岗报警",
        },
        {
          src: require("@/assets/images/enterprisePersonnelPositionManage/4.png"),
          num: 0,
          name: "长时间静止",
        },
        {
          src: require("@/assets/images/enterprisePersonnelPositionManage/5.png"),
          num: 0,
          name: "一键求救",
        },
        {
          src: require("@/assets/images/enterprisePersonnelPositionManage/6.png"),
          num: 0,
          name: "人证不符",
        },
        {
          src: require("@/assets/images/enterprisePersonnelPositionManage/7.png"),
          num: 0,
          name: "历史报警数",
        },
      ],
      result: {
          accessData: [
            { value: 1, name: "已接入企业" },
            { value: 1, name: "未接入企业" },
          ],
          alarmData: [
            { value: 1, name: "已消警企业" },
            { value: 1, name: "未消警企业" },
          ],
          alarmTotal: 0,
          accessTotal: 0,
        },
      tableData: [], // 表格数据
    };
  },
  // 挂载时
  mounted() {
    Object.keys(this.$route.query).length > 0 && this.initFilter();
    this.init();
  },
  methods: {
    log: console.log,
    goPath(path) {
      let param = '';
      Object.keys(this.filter).forEach(key=>{
        param += (param ? '&' : '') + `${key}=${encodeURIComponent(this.filter[key])}`;
      })
      this.$router.push(`${path}?${param}`);
    },
    stringify(obj) {
      try {
        return JSON.stringify(obj);
      } catch (error) {
        return "";
      }
    },
    // 点击tabs
    touchTab(event) {
      console.log(event.target.dataset.index);
    },
    initFilter(){
        Object.keys(this.filter).forEach(key => {
            if(this.$route.query[key]){
                this.filter[key] = this.$route.query[key]
            }
        });
    },
    init() {
      this.loading = true;
      //获取各类报警的数量
        requestGet("/manageArea/selectAreaName").then(res=>{
          if(res.code == 200 && res.data.length > 0){
              this.regionArray = res.data;
          }
        })

      setTimeout(() => {
        //获取统计图数据
        requestPost("/wwyt/qyrydwglsy/echartData",{qxdm:this.filter.address}).then(res=>{
          if(res.code == 200  && res.data.length > 0){
            this.result.accessData[0].value = res.data[0].yjr;
            this.result.accessData[1].value = res.data[0].wjr;
            this.result.alarmData[0].value = res.data[0].yxj;
            this.result.alarmData[1].value = res.data[0].wxj;

            this.result.accessTotal = res.data[0].yjr + res.data[0].wjr;
            this.result.alarmTotal = res.data[0].yxj + res.data[0].wxj;
          }
          else{
            this.result.accessTotal = 0;
            this.result.alarmTotal = 0;
          }
          if(this.result.accessTotal==0){
            this.option.accessOption.title.text = `无数据`;
          }else{
              this.option.accessOption.title.text = `接入率\n${(
                (this.result.accessData[0].value / this.result.accessTotal) *
                100
              ).toFixed(2)}%`;
          }
          
          if(this.result.alarmTotal == 0){
            this.option.alarmOption.title.text = `无数据%`;
          }else{
            this.option.alarmOption.title.text = `消警率\n${(
              (this.result.alarmData[0].value / this.result.alarmTotal) *
              100
            ).toFixed(2)}%`;
          }
        })

        //获取各类报警的数量
        requestPost("/wwyt/qyrydwglsy/locationAlarmCount",{qxdm:this.filter.address}).then(res=>{
          if(res.code == 200 && res.data.length > 0){
            this.tabs[0].num = res.data[0].bj1;
            this.tabs[1].num = res.data[0].bj2;
            this.tabs[2].num = res.data[0].bj3;
            this.tabs[3].num = res.data[0].bj4;
            this.tabs[4].num = res.data[0].bj5;
            this.tabs[5].num = res.data[0].bj6;
            this.tabs[6].num = res.data[0].bj7;
          }else{
            this.tabs[0].num = 0;
            this.tabs[1].num = 0;
            this.tabs[2].num = 0;
            this.tabs[3].num = 0;
            this.tabs[4].num = 0;
            this.tabs[5].num = 0;
            this.tabs[6].num = 0;
          }
        })
        
        //获取人员定位报警记录
        this.getTableData();
        this.loading = false;
      }, 300);
    },
    getTableData() {
      this.tableData = [];
       //获取报警记录
      requestPost("/wwyt/qyrydwglsy/locationAlarmRecord",{pageRequest:{pageNum:this.pageOption.pageNum
                                                                      ,pageSize:this.pageOption.pageSize}
                                                          ,selectMap:{qxdm:this.filter.address}
                                                          }).then(res=>{
        if(res.code == 200 ){
          this.tableData = res.data;
        }
      })
    },
    sizeChange(val) {
      this.pageOption.pageSize = val;
      this.getTableData();
    },
    currentChange(val) {
      this.pageOption.currentPage = val;
      this.getTableData();
    },
  },
  created(){
    

  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  min-height: 100%;
  text-align: left;
  background-color: rgb(243, 245, 251);
  .header_wrap {
    background-color: #fff;
    border-bottom: 1px solid #e0eaf5;
  }
  .box {
    padding: 20px;
    max-width: calc(100% - 40px);
    :deep .el-radio-button {
      &.is-active .el-radio-button__inner {
        background-color: #5184ea;
        position: relative;
        &::after{
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            border-top: 5px solid #5184EA;
            border-left: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 5px solid transparent;
        }
      }
    }
    .bodyContainer {
      min-height: 30vh;
      .echarts_box_wrap {
        width: 100%;
        height: 236px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .echarts_box {
          width: 48%;
          min-width: 48%;
          max-width: 48%;
          flex: 1;
          height: 236px;
          background: #ffffff;
          box-shadow: 0px 0px 19px 1px rgba(116, 118, 138, 0.16);
          border-radius: 6px;
        }
      }
      .tabsContainer {
        margin: 30px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tab {
          width: 182px;
          height: 88px;
          background: #ffffff;
          box-shadow: 0 0 19px 1px rgba(116, 118, 138, 0.16);
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin: 0 12px;
          position: relative;
          &:first-child {
            margin-left: 0;
          }
          &:last-child {
            margin-right: 0;
          }
          img {
            width: 40px;
            height: 40px;
          }
          &::after {
            content: attr(total-num) "";
            box-sizing: border-box;
            position: absolute;
            right: -6px;
            top: 2px;
            min-width: 38px;
            height: 24px;
            background: #f04361;
            border-radius: 12px 12px 12px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
